<template>
	<div class="box2">
		<div class="top">
			<div style="display: flex;">
				<el-input v-model="inpName" placeholder="请输入门店名称" class="inpsa"
					@keyup.enter.native="searchHomePage"></el-input>
				<el-input v-model="inpAdmin" placeholder="请输入负责人" class="inpsa"
					@keyup.enter.native="searchHomePage"></el-input>
				<el-time-select  format="HH-mm" value-format="HH-mm" v-model="inpTime" :picker-options="{
				      start: '00:00',
				      step: '00:05',
				      end: '24:00'
				    }" placeholder="请输入营业时间" @change="searchHomePage">
				</el-time-select>
				
				<el-input v-model="inpAddress" placeholder="请输入门店地址" style="margin-left: 30px;" class="inpsa"
					@keyup.enter.native="searchHomePage"></el-input>
				<el-input v-model="inpPhone" placeholder="请输入联系方式" class="inpsa"
					@keyup.enter.native="searchHomePage"></el-input>
				<el-button type="primary" class="search" @click="searchHomePage" icon="el-icon-search">搜索</el-button>
			</div>

			<div class="addto" style="cursor: pointer;" @click="upPage">
				<i class="el-icon-plus"></i>
				<span>添加</span>
			</div>
		</div>
		<div class="banner">
			<el-table :data="ticket" style="width: 100%">
				<el-table-column prop="outletLogo" label="门店logo">
					<template slot-scope="scope">
					<!-- 	{{baseUrl+scope.row.outletLogo}} -->
						<img class="img1" style="width: 50px;height: 50px;border-radius: 50%;"
							:src="baseUrl+scope.row.outletLogo" alt="" />
					</template>
				</el-table-column>
				<el-table-column prop="outletName" label="门店名称">
				</el-table-column>
				<el-table-column prop="adminName" label="负责人">
				</el-table-column>
				<el-table-column prop="outletOpenTime" label="营业时间">
				</el-table-column>
				<el-table-column prop="outletAddress" label="门店地址" width="150px">
					<template slot-scope="scope">
						<el-tooltip class="item" effect="light" :content="ticket[scope.$index].outletAddress"
							placement="right-end">
							<span class="tooitp">{{ ticket[scope.$index].outletAddress }}</span>
						</el-tooltip>
					</template>


				</el-table-column>
				<el-table-column prop="outletPhone" label="门店联系方式">
				</el-table-column>
				<el-table-column prop="outletDescr" label="备注">
				</el-table-column>
				<el-table-column>
					<template slot="header">
						操作
					</template>
					<template slot-scope="scope">
						<el-button type="primary" size="small" style="padding: 7px 10px;font-size: 12px;"
							@click="changeTicket(scope.row)">修改</el-button>
						<el-button type="danger" size="small" style="padding: 7px 10px;font-size: 12px;"
							@click="delTicket(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!--分页-->
			<el-row>
				<el-col style="text-align:right">
					<el-pagination layout="prev, pager, next" :total="total" :page-size="pagesize"
						@current-change='changePage' :current-page.sync="currentpage"></el-pagination>
				</el-col>
			</el-row>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				baseUrl: require("../assets/baseUrl.js").baseUrl,
				total: 0, //总数据条数
				currentpage: 1, //当前所在页默认是第一页
				pagesize: 5, //每页显示多少行数据 
				ticket: [], //所有数据
				inpTime: "",
				inpName: "",
				inpAdmin: "",

				inpAddress: "",
				inpPhone: "",

				outletName: "",
				adminName: "",
				outletOpenTime: "",
				outletAddress: "",
				outletPhone: ""
			}
		},
		methods: {
			// 获取页面的表格所有数据
			getTicket() {
				// http://localhost:8081/outlets/
				this.$http.post(this.baseUrl + 'outlets/getConditionPages', {
					page: this.currentpage + "",
					size: this.pagesize + ""
				}).then(res => {
					//console.log(res)
					if (res.data.code == 200) {
						this.ticket = res.data.data.outlets
						this.total = res.data.data.totalPages * this.pagesize
						//console.log(this.total)
						this.disposeTime()
					}
				})
			},
			changeTicket(ticketData) {
				//console.log(ticketData)
				this.$router.push('/homepage/homechange?outletId=' + ticketData.outletId)
			},
			//删除
			delTicket(ticketData) {
				this.$confirm('此操作将删除该门店, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//console.log(ticketData)
					this.$http.post(this.baseUrl + 'outlets/deleteOutlet', {
						id: ticketData.outletId
					}).then(res => {
						//console.log(res)
						if (res.data.code == 200) {
							this.$message.success("门店删除成功")
							this.currentpage = 1
							this.getTicket()
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				})
			},
			//处理时间
			disposeTime() {
				let prevTime = ""
				let nextTime = ""
				let length = 0
				//console.log(this.ticket)
				this.ticket.forEach(v => {
					v.outletOpenTime + ""
					if (v.outletOpenTime.length != 0) {
						prevTime = v.outletOpenTime.substring(0, 5)
						nextTime = v.outletOpenTime.substring(6)
						length = prevTime.length
						if (prevTime[length] != "-") {
							prevTime = prevTime + "-"
						}
						v.outletOpenTime = prevTime + nextTime
					}
				})
			},
			//改变页
			changePage(page) {
				this.currentpage = page;
				this.outletName = this.inpName;
				this.adminName = this.inpAdmin;
				this.outletOpenTime = this.inpTime;
				this.outletAddress = this.inpAddress;
				this.outletPhone = this.inpPhone
				this.search()
			},
			//回车搜索
			searchHomePage() {
				this.currentpage = 1
				this.outletName = this.inpName;
				this.adminName = this.inpAdmin;
				this.outletOpenTime = this.inpTime;
				this.outletAddress = this.inpAddress;
				this.outletPhone = this.inpPhone
				this.search()
			},
			search() {
				this.$http.post(this.baseUrl + "outlets/getConditionPages", {
					page: this.currentpage + "",
					size: this.pagesize + "",
					outletName: this.inpName + "",
					openTime: this.inpTime + "",
					outletAddress: this.inpAddress + "",
					outletPhone: this.inpPhone + "",
					adminName: this.inpAdmin + "",
				}).then(res => {
					/* 	console.log(res) */
					this.ticket = res.data.data.outlets
					this.total = res.data.data.totalPages * this.pagesize
					this.disposeTime()
				})
			},
			upPage() {
				this.$router.push('/homepage/homeadd')
			}
		},
		mounted() {
			this.getTicket()
		}
	}
</script>
<style lang="less">
	.box2 {
		display: flex;
		flex-direction: column;

		.tooitp {
			display: inline-block;
			width: 120px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}	

		.top {
			width: 80vw;
			height: 65px;
			display: flex;
			align-items: center;
			margin-bottom: 15px;
			margin-left: 30px;
			justify-content: space-between;
			//position: relative;
			.el-date-editor.el-input, .el-date-editor.el-input__inner {
			    width: 150px;
			}
			.addto {
				width: 40px;
				height: 50px;
				display: flex;
				flex-wrap: wrap;
				//position: absolute;
				//right: 10px;
			}
		}
		.banner {
			float: left;
			display: flex;
			flex-direction: column;
			width: 80vw;
			margin-left: 30px;
		}

		.el-pagination {
			margin-top: 30px;
			text-align: center;
		}

		.el-input__prefix {
			left: 130px;
			font-size: 20px;
		}

		.inpsa {
			width: 140px;
			margin-right: 10px;
		}

		.heng {
			height: 65px;
			line-height: 60px;
			font-size: 20px;
			margin-left: 30px;
		}

		.cell {
			text-align: center;
			display: flex;
			justify-content: center;
		}

		.el-input__icon {
			width: 40px;
			line-height: 40px;
		}
		
		.el-input--prefix .el-input__inner {
			width: 170px;
			padding-left: 15px;
		}

		.search {
			display: flex;
			align-items: center;

			.el-input {
				margin: 0 5px;
			}

		}

		

		.el-icon-plus {
			width: 40px;
			height: 34px;
			font-size: 34px;
			text-align: center;
		}

		.addto>span {
			width: 40px;
			height: 20px;
			text-align: center;
			font-size: 12px;
			line-height: 20px;
		}
	}
</style>